<script setup>
import { ref, onMounted } from 'vue'
import { usePointMallStore } from '@/stores/pointMallStore'

const giftImageUrl = ref('/static/images/gift-box.png')
const pointMallStore = usePointMallStore()
const userId = ref(1) // 假设当前用户ID为1

onMounted(() => {
  pointMallStore.initData(userId.value)
})

const navigatorTo = () => {
  uni.switchTab({
    url: '/pages/index/index'
  })
}
</script>

<template>
  <view class="container">
    <!-- 积分展示部分 -->
    <view class="points-section">
      <text class="my-points">我的积分</text>
      <text class="points-number">{{ pointMallStore.myPoints }}</text>
      <view class="links">
        <text>积分明细</text>
        <text>|</text>
        <text>兑换记录</text>
      </view>
    </view>

    <!-- 限时兑换区域 -->
    <view class="limited-section">
      <image :src="giftImageUrl" mode="aspectFit" class="gift-icon"></image>
      <view class="limited-content">
        <view class="limited-text">
          <text class="exchange-p">限时兑换</text>
          <text class="sub-text">循环限时绿色环保周边</text>
        </view>
        <text class="points-599">599积分</text>
      </view>
    </view>

    <!-- 加载状态和错误提示 -->
    <view class="status-section">
      <view v-if="pointMallStore.isLoading" class="loading">
        加载中...
      </view>
      <view v-if="pointMallStore.error" class="error">
        {{ pointMallStore.error }}
      </view>
    </view>

    <!-- 商品列表 -->
    <view class="products-section">
      <text class="section-title">积分兑换</text>
      <view class="products-grid">
        <view 
          class="product" 
          v-for="product in pointMallStore.products" 
          :key="product.id"
          @click="navigatorTo"
        >
          <image 
            :src="product.imageUrl" 
            :mode="product.mode || 'aspectFit'" 
            class="product-image"
          ></image>
          <text class="product-name">{{ product.name }}</text>
          <text class="points-red">{{ product.points }}积分</text>
        </view>

        <!-- 空状态 -->
        <view 
          v-if="!pointMallStore.isLoading && pointMallStore.products.length === 0" 
          class="empty"
        >
          暂无商品
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.container {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, sans-serif;
  background: linear-gradient(#fff, #C8E6C9 100%);
  min-height: 100vh;
  padding-bottom: 40rpx;
}

/* 积分展示部分 */
.points-section {
  padding: 40rpx 40rpx 20rpx;
  display: flex;
  flex-direction: column;
  
  .my-points {
    font-size: 32rpx;
    color: #333;
    margin-bottom: 10rpx;
  }

  .points-number {
    font-size: 64rpx;
    font-weight: bold;
    color: #333;
  }

  .links {
    margin-top: 20rpx;
    display: flex;
    align-items: center;
    gap: 20rpx;

    text {
      color: #666;
      font-size: 28rpx;

      &:nth-child(2) {
        color: #000;
      }
    }
  }
}

/* 限时兑换区域 */
.limited-section {
  display: flex;
  align-items: center;
  margin: 30rpx 40rpx;
  padding: 30rpx;
  background-color: #fff;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
  
  .gift-icon {
    width: 120rpx;
    height: 120rpx;
    margin-right: 30rpx;
    flex-shrink: 0;
  }
  
  .limited-content {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .limited-text {
    display: flex;
    flex-direction: column;
    
    .exchange-p {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 8rpx;
    }

    .sub-text {
      font-size: 24rpx;
      color: #666;
    }
  }

  .points-599 {
    font-weight: bold;
    font-size: 32rpx;
    color: #e74c3c;
    margin-left: 20rpx;
  }
}

/* 状态提示 */
.status-section {
  padding: 0 40rpx;
  
  .loading,
  .error {
    font-size: 28rpx;
    text-align: center;
    padding: 20rpx 0;
  }

  .loading {
    color: #666;
  }

  .error {
    color: #e74c3c;
  }
}

/* 商品列表区域 */
.products-section {
  margin-top: 20rpx;
  padding: 0 40rpx;
  
  .section-title {
    display: block;
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 30rpx;
  }
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30rpx;

  .product {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #fff;
    padding: 30rpx;
    border-radius: 20rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
    transition: transform 0.2s;
    
    &:active {
      transform: scale(0.98);
    }

    .product-image {
      width: 200rpx;
      height: 200rpx;
      margin-bottom: 20rpx;
    }

    .product-name {
      font-size: 28rpx;
      color: #333;
      margin: 10rpx 0;
      text-align: center;
    }

    .points-red {
      color: #e74c3c;
      font-size: 28rpx;
      font-weight: bold;
    }
  }

  .empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40rpx;
    color: #666;
    font-size: 28rpx;
    background-color: #fff;
    border-radius: 20rpx;
  }
}
</style>